<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Katniss Premium Admin Template</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="prettify/prettify.css" type="text/css" />
<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body>

<div class="mainwrapper">
	
    <!-- START OF LEFT PANEL -->
    <div class="leftpanel">
    	
        <div class="logopanel">
        	<h1><a href="dashboard.html">Katniss <span>v1.0</span></a></h1>
        </div><!--logopanel-->
        
        <div class="datewidget">Today is Tuesday, Dec 25, 2012 5:30pm</div>
    
    	<div class="searchwidget">
        	<form action="results.html" method="post">
            	<div class="input-append">
                    <input type="text" class="span2 search-query" placeholder="Search here...">
                    <button type="submit" class="btn"><span class="icon-search"></span></button>
                </div>
            </form>
        </div><!--searchwidget-->
        
        <div class="plainwidget">
        	<small>Using 16.8 GB of your 51.7 GB </small>
        	<div class="progress progress-info">
                <div class="bar" style="width: 20%"></div>
            </div>
            <small><strong>38% full</strong></small>
        </div><!--plainwidget-->
        
        <div class="leftmenu">        
            <ul class="nav nav-tabs nav-stacked">
            	<li class="nav-header">Main Navigation</li>
                <li><a href="dashboard.html"><span class="icon-align-justify"></span> Dashboard</a></li>
                <li><a href="media.html"><span class="icon-picture"></span> Media</a></li>
                <li class="dropdown"><a href=""><span class="icon-briefcase"></span> UI Elements &amp; Widgets</a>
                	<ul>
                    	<li><a href="elements.html">Theme Components</a></li>
                        <li><a href="bootstrap.html">Bootstrap Components</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href=""><span class="icon-th-list"></span> Tables</a>
                	<ul>
                    	<li><a href="table-static.html">Static Table</a></li>
                        <li><a href="table-dynamic.html">Dynamic Table</a></li>
                    </ul>
                </li>
                <li><a href="typography.html"><span class="icon-font"></span> Typography</a></li>
                <li><a href="charts.html"><span class="icon-signal"></span> Graph &amp; Charts</a></li>
                <li class="active"><a href="messages.html"><span class="icon-envelope"></span> Messages</a></li>
                <li><a href="buttons.html"><span class="icon-hand-up"></span> Buttons &amp; Icons</a></li>
                <li class="dropdown"><a href=""><span class="icon-pencil"></span> Forms</a>
                	<ul>
                    	<li><a href="forms.html">Form Styles</a></li>
                        <li><a href="wizards.html">Wizard Form</a></li>
                        <li><a href="wysiwyg.html">WYSIWYG</a></li>
                    </ul>
                </li>
                <li><a href="calendar.html"><span class="icon-calendar"></span> Calendar</a></li>
                <li><a href="animations.html"><span class="icon-play"></span> Animations</a></li>
                <li class="dropdown"><a href=""><span class="icon-book"></span> Other Pages</a>
                	<ul>
                    	<li><a href="404.html">404 Error Page</a></li>
                        <li><a href="invoice.html">Invoice Page</a></li>
                        <li><a href="editprofile.html">Edit Profile</a></li>
                        <li><a href="grid.html">Grid Styles</a></li>
			<li><a href="faq.html">FAQ</a></li>
			<li><a href="stickyheader.html">Sticky Header Page</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--leftmenu-->
        
    </div><!--mainleft-->
    <!-- END OF LEFT PANEL -->
    
    <!-- START OF RIGHT PANEL -->
    <div class="rightpanel">
    	<div class="headerpanel">
        	<a href="" class="showmenu"></a>
            
            <div class="headerright">
            	<div class="dropdown notification">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">
                    	<span class="iconsweets-globe iconsweets-white"></span>
                    </a>
                    <ul class="dropdown-menu">
                    	<li class="nav-header">Notifications</li>
                        <li>
                        	<a href="">
                        	<strong>3 people viewed your profile</strong><br />
                            <img src="img/thumbs/thumb1.png" alt="" />
                            <img src="img/thumbs/thumb2.png" alt="" />
                            <img src="img/thumbs/thumb3.png" alt="" />
                            </a>
                        </li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Jack</strong> <small class="muted"> - 19 hours ago</small></a></li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Daniel</strong> <small class="muted"> - 2 days ago</small></a></li>
                        <li><a href=""><span class="icon-user"></span> <strong>Bruce</strong> is now following you <small class="muted"> - 2 days ago</small></a></li>
                        <li class="viewmore"><a href="">View More Notifications</a></li>
                    </ul>
                </div><!--dropdown-->
                
    			<div class="dropdown userinfo">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">Hi, ThemePixels! <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="editprofile.html"><span class="icon-edit"></span> Edit Profile</a></li>
                        <li class="divider"></li>
                        <li><a href=""><span class="icon-wrench"></span> Account Settings</a></li>
                        <li><a href=""><span class="icon-eye-open"></span> Privacy Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="index.html"><span class="icon-off"></span> Sign Out</a></li>
                    </ul>
                </div><!--dropdown-->
    		
            </div><!--headerright-->
            
    	</div><!--headerpanel-->
        <div class="breadcrumbwidget">
        	<ul class="skins">
                <li><a href="default" class="skin-color default"></a></li>
                <li><a href="orange" class="skin-color orange"></a></li>
                <li><a href="dark" class="skin-color dark"></a></li>
                <li>&nbsp;</li>
                <li class="fixed"><a href="" class="skin-layout fixed"></a></li>
                <li class="wide"><a href="" class="skin-layout wide"></a></li>
            </ul><!--skins-->
        	<ul class="breadcrumb">
                <li><a href="dashboard.html">Home</a> <span class="divider">/</span></li>
                <li class="active">Messages</li>
            </ul>
        </div><!--breadcrumbs-->
        <div class="pagetitle">
        	<h1>Messages</h1> <span>This is a sample description for messages page...</span>
        </div><!--pagetitle-->
        
        <div class="maincontent">
        	<div class="contentinner">
            
            	<div id="tabs">
                	<ul>
                    	<li><a href="#mail">Mail</a></li>
                    	<li><a href="#chat">Chat</a></li>
					</ul>
                	<div id="mail">
                    	<div class="msghead">
                            <ul class="msghead_menu">
                                <li>
                                    <button class="btn"><span class="iconsweets-alert2"></span> Report Spam</button>
                                    <button class="btn msgtrash"><span class="iconsweets-trashcan"></span></button>
                                    <div class="btn-group">
                                        <button class="btn">Actions</button>
                                        <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                          <li><a href="#">Mark as Read</a></li>
                                          <li><a href="#">Mark as Unread</a></li>
                                          <li><a href="#">Move to Folder</a></li>
                                          <li class="divider"></li>
                                          <li><a href="#">Add Star</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="right btn-group">
                                    <a class="btn prev prev_disabled"><span class="icon-chevron-left"></span></a>
                                    <a class="btn next"><span class="icon-chevron-right"></span></a>
                                </li>
                                <li class="right"><span class="pageinfo">1-10 of 2,139</span></li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->
                        
                        <br />
                        
                        <table class="table table-bordered mailinbox">
                            <colgroup>
                                <col class="con1 width4" />
                                <col class="con0 width4" />
                                <col class="con1 width15" />
                                <col class="con0 width63" />
                                <col class="con1 width4" />
                                <col class="con1 width10" />
                            </colgroup>
                            <thead>
                            <tr>
                                <th class="head1 aligncenter"><input type="checkbox" name="checkall" class="checkall" /></th>
                                <th class="head0">&nbsp;</th>
                                <th class="head1">Sender</th>
                                <th class="head0">Subject</th>
                                <th class="head1 attachement">&nbsp;</th>
                                <th class="head0">Date</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr class="unread">
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Hiccup Haddock</td>
                                    <td><a href="" class="title">Ut enim ad minim veniam, quis nostrud exercitation</a></td>
                                    <td class="attachment"><img src="img/attachment.png" alt="" /></td>
                                    <td class="date">July 1</td>
                                </tr>
                                <tr class="unread">
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>themepixels</td>
                                    <td><a href="" class="title">Ullamco laboris nisi ut aliquip ex ea commodo consequat. </a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 30</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Puss in Boots</td>
                                    <td><a href="" class="title">Sed ut perspiciatis unde omnis iste natus error</a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 28</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Humpty Dumpty</td>
                                    <td><a href="" class="title">Sit voluptatem accusantium doloremque laudantium</a></td>
                                    <td class="attachment"><img src="img/attachment.png" alt="" /></td>
                                    <td class="date">June 20</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar starred"></a></td>
                                    <td>themepixels</td>
                                    <td><a href="" class="title">Totam rem aperiam, eaque ipsa quae ab illo inventore</a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 19</td>
                                </tr>
                                <tr class="unread">
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Hiccup Haddock</td>
                                    <td><a href="" class="title">Ut enim ad minim veniam, quis nostrud exercitation</a></td>
                                    <td class="attachment"><img src="img/attachment.png" alt="" /></td>
                                    <td class="date">July 1</td>
                                </tr>
                                <tr class="unread">
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>themepixels</td>
                                    <td><a href="" class="title">Ullamco laboris nisi ut aliquip ex ea commodo consequat. </a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 30</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Puss in Boots</td>
                                    <td><a href="" class="title">Sed ut perspiciatis unde omnis iste natus error</a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 28</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar"></a></td>
                                    <td>Humpty Dumpty</td>
                                    <td><a href="" class="title">Sit voluptatem accusantium doloremque laudantium</a></td>
                                    <td class="attachment"><img src="img/attachment.png" alt="" /></td>
                                    <td class="date">June 20</td>
                                </tr>
                                <tr>
                                    <td class="aligncenter"><input type="checkbox" name="" /></td>
                                    <td class="star"><a class="msgstar starred"></a></td>
                                    <td>themepixels</td>
                                    <td><a href="" class="title">Totam rem aperiam, eaque ipsa quae ab illo inventore</a></td>
                                    <td class="attachment"></td>
                                    <td class="date">June 19</td>
                                </tr>
        
                            </tbody>
                        </table>             
                    </div>
                    <div id="chat" class="chatcontent">
                            <div id="chatmessage" class="chatmessage">
                                <div id="chatmessageinner">
                                    <p class="reply">
					<img src="img/avatar.png" alt="" class="img-polaroid"/>
					<span class="msgblock">
					    <strong>Katniss</strong> <span class="time">- 12:10 pm</span>
					    <span class="msg">Hello, what's up!</span>
					</span>
                                    </p>
                                </div><!--chatmessageinner-->
                            </div><!--chatmessage-->
                        
                            <div class="messagebox">
                                <button class="btn btn-primary send">Send</button>
                                <span class="inputbox">
                                    <input type="text" id="msgbox" name="msgbox"  class="input-block-level" />
                                </span>
                                <div class="clearfix"></div>
                            </div><!--messagebox-->
                   	</div><!--#chat-->
                </div><!--#tabs-->
            	
             
                
            </div><!--contentinner-->
        </div><!--maincontent-->
        
    </div><!--mainright-->
    <!-- END OF RIGHT PANEL -->
    
    <div class="clearfix"></div>
    
    <div class="footer">
    	<div class="footerleft">Katniss Premium Admin Template v1.0</div>
    	<div class="footerright">&copy; ThemePixels - <a href="http://twitter.com/themepixels">Follow me on Twitter</a> - <a href="http://dribbble.com/themepixels">Follow me on Dribbble</a></div>
    </div><!--footer-->

    
</div><!--mainwrapper-->
<script type="text/javascript">
jQuery(document).ready(function(){

	// submit a message via a submit button click 
	jQuery('.messagebox button').click(function(){
		enterMessage();
	});
	
	// submit a message via an enter key press
	jQuery('.messagebox input').keypress(function(e){
		if(e.which == 13)
			enterMessage();
	});
	
	function enterMessage() {
		var msg = jQuery('.messagebox input').val(); //get the value of message box
		
		//display message from a message box
		if(msg != '') {
			jQuery('#chatmessageinner').append('<p><img src="img/avatar.png" alt="" class="img-polaroid"/>'
											   +'<span class="msgblock radius2"><strong>You</strong> <span class="time">- 12:10 pm</span>'
											   +'<span class="msg">'+msg+'</span></p>');
			jQuery('.messagebox input').val('');
			jQuery('.messagebox input').focus();
			jQuery('#chatmessageinner').animate({scrollTop: jQuery('#chatmessageinner').height()});
			
			//this will create a sample response display after submitting message
			window.setTimeout(  
				function() {  
					//this is just a sample reply when somebody send a message
					jQuery('#chatmessageinner').append('<p class="reply"><img src="img/avatar.png" alt="" class="img-polaroid" />'
													   +'<span class="msgblock radius2"><strong>Katniss:</strong> <span class="time">12:11 pm</span>'
													   +'<span class="msg">This is an automated reply!!</span></p>', function(){
						jQuery(this).animate({scrollTop: jQuery(this).height()});
					});
				}, 1000);			
		}	
	}


});
</script>
</body>
</html>
